<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <section>
        <img src="bg.jpg" class="bg">
        <img src="moon.png" class="moon">
        <img src="mountain.png" class="mountain">
        <img src="road.png" class="road" road>
        <h2 class="text">
            This Is A Demo
        </h2>
    </section>
    <section>
        <img src="bg.jpg" class="bg">
        <img src="moon.png" class="moon">
        <img src="mountain.png" class="mountain">
        <img src="road.png" class="road" road>
        <h2 class="text">
            全局页面滚动视差
        </h2>
    </section>
    <section>
        <img src="bg.jpg" class="bg">
        <img src="moon.png" class="moon">
        <img src="mountain.png" class="mountain">
        <img src="road.png" class="road" road>
        <h2 class="text">
            Design by ZhangSen
        </h2>
    </section>
    <section>
        <img src="bg.jpg" class="bg">
        <img src="moon.png" class="moon">
        <img src="mountain.png" class="mountain">
        <img src="road.png" class="road" road>
        <h2 class="text">
            灵感来源YouTube
        </h2>
    </section>
    <section>
        <img src="bg.jpg" class="bg">
        <img src="moon.png" class="moon">
        <img src="mountain.png" class="mountain">
        <img src="road.png" class="road" road>
        <h2 class="text">
            欢迎体验
        </h2>
    </section>
    <div style="height:100vh">

    </div>
    <script>
        let vh = window.innerHeight
        let bg = document.querySelectorAll('.bg')
        let moon = document.querySelectorAll('.moon')
        let mountain = document.querySelectorAll('.mountain')
        let road = document.querySelectorAll('.road')
        let text = document.querySelectorAll('.text')
        const count = document.querySelectorAll("section").length
        const Scrollhandle = (e) => {
            let value = window.scrollY;
            for (let i = 0; i < count; i++) {
                if (value > vh * i && value < vh * (i + 1)) {
                    let gap = value - vh * i
                    bg[i].style.top = gap * 0.5 + 'px';
                    moon[i].style.left = -gap * 0.5 + 'px';
                    mountain[i].style.top = -gap * 0.15 + 'px';
                    road[i].style.top = gap * 0.15 + 'px';
                    text[i].style.top = gap * 1 - 100 + 'px';
                }
            }
        }
        window.addEventListener("resize", () => {
            vh = window.innerHeight
            window.removeEventListener("scroll", Scrollhandle)
            window.addEventListener("scroll", Scrollhandle)
        })
        window.addEventListener('scroll', Scrollhandle)
    </script>

</body>

</html>